<template>
  <c-view>
    <template v-slot:header>
      <el-page-header @back="goBack" :content="$route.meta.name || $t(`route.${$route.meta.title}`)"></el-page-header>
    </template>
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="detail-form"
      label-position="right" status-icon>
      <el-form-item label="输入框:" prop="">
        <!-- <el-input v-model.trim="formModel." class="form-item" clearable></el-input> -->
      </el-form-item>
      <el-form-item label="下拉选择:" prop="">
        <!-- <query-dict
					:disabled="isEdit"
					:dict-list="lobList"
					class="select-item"
					placeholder="请选择"
					:value.sync="formModel."
				></query-dict> -->
      </el-form-item>
      <!--  TODO... -->
      <el-form-item class="button-item">
        <el-button :loading="btnLoading" :size="size" type="primary" @click.native.prevent="submitHandle">保存</el-button>
        <el-button :size="size" @click.native.prevent="goBack">返回</el-button>
      </el-form-item>
    </el-form>
    <div v-if="dialogObj.isShow">
      <c-dialog class="dialog-box" :is-show="dialogObj.isShow" :title="dialogObj.title" close-btn
        @before-close="dialogObj.isShow = false" @on-submit="dialogConfirm">
        <!-- TODO... 根据需求添加业务对话框处理 -->
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
  import MixinForm from 'mixins/form'
  import CDialog from 'components/dialog'

  export default {
    name: '{{camelCase name}}',
    mixins: [MixinForm],
    components: {
      CDialog
    },
    data() {
      return {
        formModel: {
          // TODO... 初始化数据，需加备注
        },
        dialogObj: {},
        btnLoading: false,
        rules: {}
      }
    },

    created() {
      this.fetchData()
    },

    methods: {
      fetchData() {
        const { id } = this.$route.params
        this.$api.{{ camelCase apiFile }}.query{{ properCase name }}Detail({ id }).then(res => {
          this.setTagsViewTitle()
          if (res) {
            this.formModel = res
          }
        })
    },
  dialogConfirm() {
    this.dialogObj.isShow = false
  },
  submitHandle() {
    this.$refs.formRef.validate(valid => {
      if (valid) {
        const requestMethods = {
          'add': this.$api.{{ camelCase apiFile }}.add{{ properCase name }},
          'edit': this.$api.{{ camelCase apiFile }}.edit{{ properCase name }}
        }
        const { id } = this.$route.params
        const request = id ? requestMethods['edit'] : requestMethods['add']

        const params = {
          // TODO...
        }

        request(params).then(() => {
          this.$msgTip(id ? '更新成功' : '新增成功').then(() => {
            this.closeCurrentTag()
            this.goBack()
          })
        })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  }
}
</script>
